<div class="add-to-project middle surface-shaded">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-10">
        <breadcrumbs breadcrumbs="breadcrumbs"></breadcrumbs>
        <div ng-if="!error && (!targetObject || !configMaps || !secrets)">Loading...</div>

        <div ng-if="error" class="empty-state-message text-center">
          <h2>The {{kind | humanizeKind}} could not be loaded.</h2>
          <p>{{error | getErrorDetails}}</p>
        </div>

        <div ng-if="targetObject && configMaps && secrets">
          <div ng-if="!configMaps.length && !secrets.length && !(configMapVersion | canI : 'create') && !(secretVersion | canI : 'create')" class="empty-state-message empty-state-full-page text-center">
            <h2>No config maps or secrets.</h2>

            <p>
              There are no config maps or secrets in project {{project | displayName}} to use
              as a volume for this {{kind | humanizeKind}}.
            </p>

            <p ng-if="targetObject"><a ng-href="{{targetObject | navigateResourceURL}}">Back to {{kind | humanizeKind}} {{name}}</a></p>
          </div>

          <div ng-if="configMaps.length || secrets.length || (configMapVersion | canI : 'create') || (secretVersion | canI : 'create')" class="mar-top-xl">
            <h1>Add Config Files to {{name}}</h1>
            <div class="help-block">
              Add values from a config map or secret as volume. This will make the data available as files for {{kind | humanizeKind}} {{name}}.
            </div>
            <form name="forms.addConfigVolumeForm" class="mar-top-lg">
              <fieldset ng-disabled="disableInputs">
                <div class="form-group">
                  <label class="required">Source</label>
                  <ui-select ng-model="attach.source" ng-required="true">
                    <ui-select-match placeholder="Select config map or secret">
                      <span>
                        {{$select.selected.metadata.name}}
                        <small class="text-muted">&ndash; {{$select.selected.kind | humanizeKind : true}}</small>
                      </span>
                    </ui-select-match>
                    <ui-select-choices
                        repeat="source in (configMaps.concat(secrets)) | filter : { metadata: { name: $select.search } } track by (source | uid)"
                        group-by="groupByKind">
                      <span ng-bind-html="source.metadata.name | highlight : $select.search"></span>
                    </ui-select-choices>
                  </ui-select>
                  <div ng-if="(configMapVersion | canI : 'create') || (secretVersion | canI : 'create')" class="mar-top-md">
                    <span ng-if="configMapVersion | canI : 'create'">
                      <a ng-href="project/{{project.metadata.name}}/create-config-map">Create Config Map</a>
                    </span>
                    <span ng-if="secretVersion | canI : 'create'">
                      <span ng-if="configMapVersion | canI : 'create'" class="action-divider" aria-hidden="true">|</span>
                      <a ng-href="project/{{project.metadata.name}}/create-secret">Create Secret</a>
                    </span>
                  </div>
                  <div class="help-block">
                    Pick the config source. Its data will be mounted as a volume in the container.
                  </div>
                </div>

                <div class="form-group">
                  <label for="mount-path" class="required">Mount Path</label>
                  <input
                      id="mount-path"
                      class="form-control"
                      type="text"
                      name="mountPath"
                      ng-model="attach.mountPath"
                      required
                      ng-pattern="/^\/.*$/"
                      osc-unique="existingMountPaths"
                      placeholder="example: /data"
                      autocorrect="off"
                      autocapitalize="none"
                      spellcheck="false"
                      aria-describedby="mount-path-help">
                  <div>
                    <span id="mount-path-help" class="help-block">
                      Mount path for the volume.
                      <span ng-if="!attach.pickKeys">
                        A file will be created in this directory for each key from the config
                        map or secret. The file contents will be the value of the key.
                      </span>
                    </span>
                  </div>
                  <div class="has-error" ng-show="forms.addConfigVolumeForm.mountPath.$error.pattern && forms.addConfigVolumeForm.mountPath.$touched">
                    <span class="help-block">
                      Mount path must be a valid path to a directory starting with <code>/</code>.
                    </span>
                  </div>
                  <div class="has-error" ng-show="forms.addConfigVolumeForm.mountPath.$error.oscUnique">
                    <span class="help-block">
                      The mount path is already used. Please choose another mount path.
                    </span>
                  </div>
                </div>

                <div class="form-group">
                  <div class="checkbox">
                    <label>
                      <input
                          id="select-keys"
                          type="checkbox"
                          ng-model="attach.pickKeys"
                          ng-disabled="!attach.source"
                          aria-describedby="select-keys-help">
                      Select specific keys and paths
                    </label>
                    <div id="select-keys-help" class="help-block">
                      Add only certain keys or use paths that are different than the key names.
                    </div>
                  </div>
                </div>

                <div ng-if="attach.pickKeys && attach.source" class="mar-bottom-md">
                  <h3>Keys and Paths</h3>
                  <div class="help-block mar-bottom-md">
                    Select the keys to use and the file paths where each key will be exposed.
                    The file paths are relative to the mount path.
                    The contents of each file will be the value of the key.
                  </div>
                  <div ng-repeat="item in attach.items">
                    <div class="row">
                      <div class="form-group col-md-6">
                        <label class="required">Key</label>
                        <ui-select ng-model="item.key" ng-required="true">
                          <ui-select-match placeholder="Pick a key">
                            {{$select.selected}}
                          </ui-select-match>
                          <ui-select-choices repeat="key in attach.source.data | keys | filter : $select.search">
                            <span ng-bind-html="key | highlight : $select.search"></span>
                          </ui-select-choices>
                        </ui-select>
                      </div>
                      <div class="form-group col-md-6">
                        <label ng-attr-for="path-{{$id}}" class="required">Path</label>
                        <input
                            ng-attr-id="path-{{$id}}"
                            class="form-control"
                            ng-class="{ 'has-error': forms.addConfigVolumeForm['path-' + $id].$invalid && forms.addConfigVolumeForm['path-' + $id].$touched }"
                            type="text"
                            name="path-{{$id}}"
                            ng-model="item.path"
                            ng-pattern="RELATIVE_PATH_PATTERN"
                            required
                            osc-unique="itemPaths"
                            placeholder="example: config/app.properties"
                            autocorrect="off"
                            autocapitalize="none"
                            spellcheck="false">
                        <div class="has-error" ng-show="forms.addConfigVolumeForm['path-' + $id].$error.pattern">
                          <span class="help-block">
                            Path must be a relative path. It cannot start with <code>/</code> or
                            contain <code>..</code> path elements.
                          </span>
                        </div>
                        <div class="has-error" ng-show="forms.addConfigVolumeForm['path-' + $id].$error.oscUnique">
                          <span class="help-block">
                            Paths must be unique.
                          </span>
                        </div>
                      </div>
                    </div>
                    <div class="mar-bottom-md">
                      <a ng-hide="attach.items.length === 1" href="" ng-click="removeItem($index)">Remove Item</a>
                      <span ng-if="$last">
                        <span ng-hide="attach.items.length === 1" class="action-divider" aria-hidden="true">|</span>
                        <a href="" ng-click="addItem()">Add Item</a>
                      </span>
                    </div>
                  </div>
                </div>

                <div ng-if="targetObject.spec.template.spec.containers.length > 1">
                  <h3 ng-class="{ hidden: attach.allContainers && !attach.pickKeys }">Containers</h3>
                  <div ng-if="attach.allContainers">
                    The volume will be mounted into all containers. You can
                    <a href="" ng-click="attach.allContainers = false">select specific containers</a>
                    instead.
                  </div>

                  <div ng-if="!attach.allContainers" class="form-group">
                    <label class="sr-only required">Containers</label>
                    <select-containers
                        ng-model="attach.containers"
                        pod-template="targetObject.spec.template"
                        ng-required="true"
                        help-text="Add the volume to the selected containers.">
                    </select-containers>
                  </div>
                </div>

                <div class="button-group gutter-top gutter-bottom">
                  <button type="submit"
                      class="btn btn-primary btn-lg"
                      ng-click="addVolume()"
                      ng-disabled="forms.addConfigVolumeForm.$invalid || disableInputs">Add</button>
                  <a class="btn btn-default btn-lg"
                      role="button"
                      href=""
                      ng-click="cancel()">Cancel</a>
                </div>
              </fieldset>
            </form>
          </div>
        </div>
      </div><!-- /col-md-* -->
    </div><!-- /row -->
  </div><!-- /container -->
</div><!-- /middle -->
